<template>
  <div class="warp">
    <div class="top-box">
      <el-button size="mini" type="primary" @click="handleBtn({}, 'add')"
        >新增用户</el-button
      >
    </div>
    <div class="table-box">
      <el-table :data="tableList">
        <el-table-column prop="niceName" label="用户名" align="center" />
        <el-table-column prop="userName" label="登录账号" align="center" />
        <el-table-column prop="userPas" label="登录密码" align="center" />
        <el-table-column prop="role" label="账号角色" align="center" />
        <el-table-column label="账号角色" align="center">
          <template #default="scope">
            <el-tag size="mini">{{ scope.row.role }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template #default="scope">
            <el-switch v-model="scope.row.status" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180px" align="center">
          <template #default="scope">
            <el-button
              size="mini"
              type="warning"
              plain
              @click="handleBtn(scope.row, 'edit')"
            >
              修改
            </el-button>
            <el-button
              size="mini"
              type="danger"
              plain
              @click="handleDelete(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pdtb40 flex just-center">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-count="pageCount"
          @current-change="pageList"
        />
      </div>
    </div>

    <!-- 表单弹窗 -->
    <MenuManageForm
      v-if="dialogFormVisible"
      :dialogFormVisible="dialogFormVisible"
      :detail="detail"
      @dialogVisible="dialogVisible"
    ></MenuManageForm>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, computed } from "vue";
import { useStore } from "vuex";
import axios from "@/utils/axios";
import { ElMessage, ElMessageBox } from "element-plus";
import MenuManageForm from "@/components/SystemSettings/UserManageForm.vue";
export default {
  name: "Index",
  components: {
    MenuManageForm,
  },
  setup() {
    const store = useStore();
    const state = reactive({
      dialogFormVisible: false, //表单弹窗
      detail: {}, //点击详情
      tableList: [], //用户列表
      form: { page: 1, size: 20 }, //分页请求
      pageCount: 1, //总页数
    });
    onMounted(() => {
      listHland();
    });
    //分页
    const pageList = (e) => {
      state.form.page = e;
      listHland();
    };
    //获取列表
    const listHland = async () => {
      const res = await axios.get("/api/userList");
      state.tableList = res.data.list;
      console.log(res.data.list);
    };
    //关闭弹窗回调
    const dialogVisible = (value) => {
      state.dialogFormVisible = value;
    };
    //新增//编辑
    const handleBtn = (item, status) => {
      item.obj = { status: status };
      state.detail = item;
      state.dialogFormVisible = true;
    };
    //删除
    const handleDelete = (item) => {
      ElMessageBox.confirm("此操作将删除菜单, 是否继续?", "提示", {
        type: "warning",
      })
        .then(() => {
          ElMessage({
            type: "success",
            message: "删除成功",
          });
        })
        .catch(() => {});
    };

    return {
      ...toRefs(state),
      pageList, //分页
      dialogVisible, //关闭弹窗回调
      handleBtn, //添加
      handleDelete, //删除
    };
  },
};
</script>

<style lang="scss" scoped>
.warp {
  /********** element公共修改样式 **********/
  .table-box {
    :deep(table) {
      width: 100% !important;
    }
  }
}
</style>